<script setup lang="ts">
import { onMounted, reactive, ref, nextTick, defineProps, watch } from "vue";
import { useStore } from "@/store/index";
import * as echarts from "echarts";
import {
  useTitle,
  usexAxis,
  useyAxis,
  useLegend,
  useGrid,
  useUpdate,
  useLineStyle,
} from "@/utils/chart";

const props = defineProps<{
  uuid: string;
}>();

const xAxisData = ref<any[]>([]);

const store = useStore();
const titleConfig = useTitle(props.uuid, store);
const xAxisConfig = usexAxis(props.uuid, store, xAxisData);
const yAxisConfig = useyAxis(props.uuid, store);
const legendConfig = useLegend(props.uuid, store);
const gridConfig = useGrid(props.uuid, store);
const lineStyleConfig = useLineStyle(props.uuid, store);

onMounted(() => {
  const options = reactive({
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
      },
      {
        data: [120, 92, 901, 94, 1290, 1330, 1320],
        type: "line",
      },
    ],
  });
  xAxisData.value = [
    "测试1",
    "测试2",
    "测试3",
    "测试4",
    "测试5",
    "测试6",
    "测试7",
  ];
  nextTick(() => {
    const chartDom = document.getElementById(props.uuid);
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      useUpdate(
        [
          titleConfig,
          xAxisConfig,
          yAxisConfig,
          legendConfig,
          gridConfig,
          lineStyleConfig,
        ],
        myChart,
        options
      );
      watch(
        () => store.widgetConfig[props.uuid].height,
        () => {
          myChart.resize();
        }
      );
      watch(
        () => store.widgetConfig[props.uuid].width,
        () => {
          myChart.resize();
        }
      );
    }
  });
});
</script>

<template>
  <div :id="uuid" style="width: 100%; height: 100%"></div>
</template>

<style lang="less"></style>
